#{extends 'overlay.html' /}
#{set title: pName+' \'sBurndown Chart' /}

#{ifnot Data}
<div id="NOTE"style="padding: 10px 10px 10px 10px" class="ui-state-highlight ui-corner-all"> 
	<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
	<strong>NOTE: </strong>There isn't enough data to display</div>
#{/ifnot}
#{else}


#{set 'onLoad'}${Data};
 
#{/set}


#{set 'moreScripts'}
    
    <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/jquery.jqplot.css'}" />
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/jquery.jqplot.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.logAxisRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.canvasTextRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.canvasAxisLabelRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.canvasAxisTickRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.dateAxisRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.categoryAxisRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.barRenderer.js'}"></script>
    <script language="javascript" type="text/javascript" src="@{'/public/javascripts/generateFunction.js'}"></script>
     		<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.cursor.js'}"></script>
    <script type="text/javascript">
function isBefore(date){
	var now=new Date();
	var other=new Date(date);
	if(now<other){
	return  true;
		}
	else{
	return false;
		}
}</script>
    <style type="text/css">
    .hide
    {
    display:none;}
    </style>
    #{/set}
    	    	<div id="NOTE"style="padding: 10px 10px 10px 10px" class="ui-state-highlight ui-corner-all"> 
	<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
	<strong>NOTE: </strong>If your graph has too much data then not all points will be shown, to view more day specific statistics then you will have to zoom in. To zoom in on a graph, simply click and drag and let go. To zoom out just double click the graph!
	<br/><a href="#" onclick="$('#NOTE').css('display','none');">hide me?</a></div>
    #{if componentId==0}
    <h1>${pName}'s overall progress</h1>
    #{/if}
    #{else}
    <h1>${myComponent.name}'s overall progress</h1>
    #{/else}
    <div class="jqplot" id="c_FULL" style="width:100%;height:300px;"></div>
 
         #{/else}